<template>
  <div id="room">
    <div :class="'notice-container' + (this.audioPlayer ? ' active' : '')">
      <div class="notice-img-container">
        <div class="notice-img-inner-container" :style="{width: imgWidth + 'px'}">
          <img src="../assets/Room/img/notice.png"/>
        </div>
      </div>
      <div class="notice-text">
        {{noticeText ? noticeText : '当前无最新消息'}}
      </div>
    </div>
    <div class="room-container">
      <div class="room-floor" :key="floor.number" v-for="floor in floors">
        <div class="floor-name">{{floor.name}}</div>
        <div class="room-item" :key="room.ardId" v-for="room in rooms.filter(r => r.floor === floor.number)">
          <div class="room-no">{{room.number}}</div>
          <div :class="'room-state '+(room.state ? 'busy' : 'free')">
            <marquee v-if="room.state && room.visitorId">
              <span>
                {{getVisitor(room.visitorId).name}}
              </span>
              <span>
                正在
              </span>
              <span v-if="[4, 5].some(t => t === getVisitor(room.visitorId).typeId)">提审</span>
              <span v-if="getVisitor(room.visitorId).typeId === 3">会见</span>
            </marquee>
            <span v-if="room.state && !room.visitorId">
              占用
            </span>
            <span v-if="!room.state">
              空闲
            </span>
          </div>
          <div :class="'room-type type'+room.type">
            <span v-if="room.state && room.visitorId">
              {{getRoomType(room)}}
            </span>
            <span v-else>
              {{roomTypeConstants[room.type]}}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Room',
  data () {
    return {
      rooms: [],
      roomTypeConstants: {
        1: '民警讯问室',
        2: '律师会见室',
        3: '检察院讯问室',
        4: '民警/律师',
        5: '民警/检察院'
      },
      floors: [{
        number: 1,
        name: '一楼'
      }, {
        number: 2,
        name: '二楼'
      }, {
        number: 3,
        name: '三楼'
      }, {
        number: 4,
        name: '四楼'
      }],
      visitors: [],
      visitorTypes: [],
      imgWidth: 68,
      noticeText: '', // 提示文字
      animationTimer: null,
      audioPlayer: null,
      voiceCount: 5 // 语音播报次数
    }
  },
  methods: {
    /**
     * 获取访客类型与房间信息
     */
    getBasicData () {
      this.$http.POST('Interviewer:GetVisirtorTypes').then(res => {
        if (res.data.code === 200) {
          this.$set(this, 'visitorTypes', res.data.rows)
          return this.$http.POST('Interviewer:GetRooms')
        } else {
          this.$alert(res.data.msg, '提示', {
            confirmButtonText: '确定',
            callback: () => {
              this.$router.push('/login')
            }
          })
        }
      }).then(res => {
        this.$set(this, 'rooms', res.data.rows)
        const ids = this.rooms.filter(r => r.state === 1).filter(r => r.visitorId).map(r => r.visitorId).join(',')
        if (ids.length) {
          this.$http.POST('Interviewer:GetVisitorsByIds', null, { ids }).then(res1 => {
            this.$set(this, 'visitors', res1.data.data)
          })
        }
      })
    },

    /**
     * 获取房间信息
     */
    getRoomData () {
      this.$set(this, 'visitors', [])
      this.$http.POST('Interviewer:GetRooms').then(res => {
        this.$set(this, 'rooms', res.data.rows)
        const ids = this.rooms.filter(r => r.state === 1).filter(r => r.visitorId).map(r => r.visitorId).join(',')
        if (ids.length) {
          this.$http.POST('Interviewer:GetVisitorsByIds', null, { ids }).then(res1 => {
            this.$set(this, 'visitors', res1.data.data)
          })
        }
      })
    },
    /**
     * 获取房间类型
     */
    getRoomType (room) {
      let type
      switch (this.visitors.find(v => v.id === room.visitorId).typeId) {
        case 3:
          type = 2
          break
        case 4:
          type = 1
          break
        case 5:
          type = 3
          break
      }
      return this.roomTypeConstants[type]
    },
    /**
     * 获取访客信息
     */
    getVisitor (visitorId) {
      return this.visitors.find(v => v.id === visitorId)
    },
    /**
     * 喇叭动画开始
     */
    noticeAnimationStart () {
      if (!this.animationTimer) {
        this.animationTimer = setInterval(() => {
          this.imgWidth = this.imgWidth === 68 ? 80 : 68
        }, 200)
      }
    },
    /**
     * 喇叭动画结束
     */
    noticeAnimationEnd () {
      this.imgWidth = 68
      if (this.animationTimer) {
        clearInterval(this.animationTimer)
        this.animationTimer = null
      }
    }
  },
  created () {
    this.getBasicData()
    setTimeout(() => {
      this.$ws.CreateEvent('room', e => {
        this.getRoomData()
        const msg = JSON.parse(e.data)
        if (msg.code === this.MESSAGE_CODE.RELAY) {
          return
        }
        if (msg.msgType === this.MESSAGE_TYPE.ROOM_VOICE) {
          this.noticeText = msg.msgBody
          let playCount = 0
          const voiceTimer = setInterval(() => {
            if (this.audioPlayer === null) {
              clearInterval(voiceTimer)
              this.audioPlayer = document.createElement('audio')
              this.audioPlayer.src = msg.AudioURL
              // this.audioPlayer.src = 'http://vcast-resource.cdn.bcebos.com/vcast-resource/b8b86010-ae4b-4321-9674-d5214f8e409f.mp3'
              this.audioPlayer.play()
              this.audioPlayer.onended = () => {
                if (++playCount < this.voiceCount) {
                  this.audioPlayer.play()
                } else {
                  this.audioPlayer = null
                  this.noticeAnimationEnd()
                  this.noticeText = ''
                }
              }
              this.audioPlayer.play()
            }
          }, 500)
          this.noticeAnimationStart()
          this.$ws.SendMessage({
            code: this.MESSAGE_CODE.RELAY,
            msgType: this.MESSAGE_TYPE.ROOM_UPDATE
          })
        } else if (msg.msgType === this.MESSAGE_TYPE.ROOM_UPDATE) {
          this.getRoomData()
          this.$ws.SendMessage({
            code: this.MESSAGE_CODE.RELAY,
            msgType: this.MESSAGE_TYPE.ROOM_UPDATE
          })
        }
      })
    }, 1000)
  }
}
</script>

<style scoped>
  * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0;
    padding: 0;
  }
  #room{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(141deg, #226552 0%, #17483e 51%, #063d40 75%);
    position: relative;
  }
  .room-container{
    position: absolute;
    width: calc(100% - 50px);
    left: 25px;
    top: 140px;
    overflow: auto;
  }
  .room-floor{
    overflow: auto;
    margin-bottom: 20px;
  }
  .room-floor:nth-last-child(1){
    margin-bottom: 0;
  }
  .floor-name{
    margin: 0 auto;
    width: 120px;
    text-align: center;
    line-height: 40px;
    background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
    border: 2px solid transparent;
    border-radius: 5px;
    font-size: 20px;
    color: #eee;
    font-weight: bold;
  }
  .room-item{
    width: 116px;
    height: 116px;
    float: left;
    margin: 20px 0 0 20px;
    border:3px solid teal;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
  }
  .room-item:nth-child(2){
    margin-left: 0;
  }
  .room-no{
    background-color: teal;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #eee;
  }
  .room-state{
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    background-color: #fff;
    font-weight: bold;
  }
  .room-state.free{
    color: limegreen;
  }
  .room-state.busy{
    color: red;
  }
  .room-type{
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    color: #eee;
  }
  .room-type.type1{
    background-image:linear-gradient(141deg, deepskyblue 0%,#2196f3  51%, dodgerblue 75%);
  }
  .room-type.type2{
    background-image:linear-gradient(141deg, #32cd77 0%,#32cda9  51%, #32cdbf 75%);
  }
  .room-type.type3{
    background-image:linear-gradient(141deg, #41ade1 0%,#4181e1  51%, royalblue 75%);
  }
  .room-type.type4{
    background-image:linear-gradient(141deg, dodgerblue 0%,#32abcd  51%, #32cdbf 75%);
  }
  .room-type.type5{
    background-image:linear-gradient(141deg, #41cbe2 0%,#41a8e1  51%, royalblue 75%);
  }
  .notice-container{
    position: absolute;
    width: calc(100% - 50px);
    left: 25px;
    top: 20px;
    height: 100px;
    border: 2px solid teal;
    border-radius: 5px;
    background: #ffffff99;
    display: flex;
  }
  .notice-img-container{
    width: 80px;
    height: 85px;
    margin-left: 20px;
    margin-top: 10px;
  }
  .notice-img-inner-container{
    height: 85px;
    overflow: hidden;
  }
  .notice-img-container img{
    width: 80px;
    height: 85px;
  }
  @keyframes flicker {
    0%{
      opacity: 1;
    }
    50%{
      opacity: .2;
    }
    100%{
      opacity: .9;
    }
  }
  .notice-container > .notice-text{
    line-height: 100px;
    color: red;
    font-size: 48px;
    text-indent: 20px;
  }
  .notice-container.active{
    border: 2px dashed red;
  }
</style>
